/**
* Created by ren on 2017/1/6.
*/
<template>
  <div class='addBank'>
    <div class="item"><label>姓名：</label><input type="text" placeholder="请输入真实姓名" v-model="realName"></div>
    <div class="item"><label>银行卡号：</label><input type="text" placeholder="请输入银行卡号" v-model="account"></div>
    <div class="item"><label>银行名称：</label><input type="text" placeholder="请输入银行名称" disabled="true" v-model="bankName">
    </div>
    <div class="item"><label>开户省份：</label><input type="text" placeholder="请输入开户省份" v-model="accountProvince"></div>
    <div class="item"><label>开户城市：</label><input type="text" placeholder="请输入开户省份" v-model="accountCity"></div>
    <div class="item"><label>分行名称：</label><input type="text" placeholder="请输入分行名称" v-model="childBankName"></div>
    <div class="item"><label>图形验证：</label><input type="text" placeholder="请输入图形验证码" v-model="imgCode"
                                                 style="width: 290px">
      <img v-lazy="getImgCode(imgUrl)" @click="valiCode"
           style="cursor: pointer;;margin: 0px;height: 48px;width: 100px;font-size: 16px;color: rgb(204, 204, 204); border: 1px solid rgb(204, 204, 204);background: white;margin-top: -2px;margin-left: 5px;">
    </div>
    <div class="item"><label>手机号：</label><input type="text" v-model="mobile" disabled=true placeholder="请输入手机号">
    </div>
    <div class="item">
      <label>验证码：</label><input type="text" v-model="code" placeholder="请输入验证码" style="width: 268px">
      <button :class="{getmsgcode:true,btn:true,'getmsgcode':true,'disabled':msgStatus}" @click="getSMSCode"
              :disabled="msgStatus"
              style="margin: 0px;height: 48px;width: 123px;color: #0171d9;font-size: 14px; border: 1px solid rgb(204, 204, 204);background: white;margin-top: -2px;margin-left: 5px;">
        {{msgText}}
      </button>
    </div>
    <div class="btns" style="text-align: center;margin-bottom: 100px">
      <button class="btn" @click="canelAddress" style="margin-right: 36px;background: #615e5e;">取消</button>
      <button class="btn" @click="saveMyBank">确认绑定</button>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
</template>

<script>
  import API from '../../api'
  import Notify from '../Notify'
  export default {
    name: 'addBank',
    components: {
      Notify
    },
    props: ['_parentThis'],
    data: function () {
      return {
        realName: '',
        account: '',
        bankName: '',
        accountProvince: '',
        accountCity: '',
        childBankName: '',
        notifyStatus: 2,
        imgUrl: '',
        msgText: '获取验证码',
        msgStatus: true,
        mobile: '',
        imgCode: '',
        code: ''
      }
    },
    methods: {
      getImgCode: function (url) {
        return API.imgcodeUrl + url.substring(url.indexOf('goldxianshang'))
      },
      canelAddress: function () {
        this._parentThis.safeChild = 'bankList'
        this._parentThis.titHtml = '<span>信息安全 > <span style="color: #f48315;">银行卡管理</span></span>'
      },
      getSMSCode: function () {
        if (!this.mobile) {
          this.notifyStatus = '0|电话号码不能为空！'
          return
        }
        if (!this.imgCode) {
          this.notifyStatus = '0|图形验证码不能为空！'
          return
        }
        this.$http.post(API.getCYSmsCode, {
          'mobile': this.mobile,
          'forget': '',
          'imgCode': this.imgCode,
          'imgUrl': this.imgUrl
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            var i = 60
            var s = setInterval(() => {
              if (i === 0) {
                this.msgText = '重新发送'
                this.msgStatus = false
                clearInterval(s)
                return
              }
              this.msgText = '(' + i + 's)后重新发送'
              i--
            }, 1000)
            this.msgStatus = true
            this.msgSendStatus = true
          } else if (result.code === 0) {
            this.notifyStatus = '0|' + result.message
            this.valiCode()
          }
        }, (err) => {
          console.log(err)
        })
      },
      valiCode: function () {
        this.$http.post(API.valiCode).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.imgUrl = result.object
          } else {
          }
        }, (err) => {
          console.log(err)
        })
      },
      getBankName: function () {
        this.$http.post(API.getBankName, {
          binCode: this.account.substr(0, 6)
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.bankName = result.object
          } else {
          }
        }, (err) => {
          console.log(err)
        })
      },
      saveMyBank: function () {
        this.$http.post(API.saveMyBank, {
          realName: this.realName,
          account: this.account,
          bankName: this.bankName,
          accountProvince: this.accountProvince,
          accountCity: this.accountCity,
          childBankName: this.childBankName,
          mobile: this.mobile,
          code: this.code,
          userId: this.$cookie.get('id'),
          imgCode: this.imgCode,
          imgUrl: this.imgUrl
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this._parentThis.safeChild = 'bankList'
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      }
    },
    watch: {
      mobile: function (newVal) {
        if (!this.msgSendStatus) {
          if (newVal && this.imgCode) {
            this.msgStatus = false
          }
        }
      },
      imgCode: function (newVal) {
        if (!this.msgSendStatus) {
          if (newVal && this.mobile) {
            this.msgStatus = false
          }
        }
      },
      code: function (newVal, oldVal) {
        if (newVal !== '' && !/^[0-9]*[1-9][0-9]*$/.test(newVal)) {
          this.code = oldVal
        }
      },
      account: function () {
        this.getBankName()
      }
    },
    mounted: function () {
      this.valiCode()
      this.mobile = this.$cookie.get('mobile')
    }
  }
</script>
